<template>
  <div class="main">
    <el-page-header v-if="parentList.length" @back="toParentList" style="margin-bottom: 20px">
      <template slot="content">
        上级菜单：
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{name: 'sysMenu', params: {parentId: 'root'}}">
            顶级菜单
          </el-breadcrumb-item>
          <el-breadcrumb-item
              v-for="(item,index) in parentList" :key="index"
              :to="{name: 'sysMenu', params: {parentId: item.id}}"
          >
            {{ item.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </el-page-header>

    <data-table ref="dataTable" :props="dataTableProps">
      <template #data="{onEdit,onDel}">
        <el-table-column prop="icon" label="图标" width="80">
          <template slot-scope="{row}">
            <i :class="row.icon"/>
            <svg-icon :icon-class="row.icon"/>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="200"/>
        <el-table-column prop="path" label="路径" width="180"/>
        <el-table-column prop="name" label="路径名称" width="180"/>
        <el-table-column prop="componentPath" label="菜单导航组件路径" width="180"/>
        <el-table-column prop="isDisplay" label="是否显示" width="100">
          <template slot-scope="{row}">
            <el-switch v-model="row.hidden" :active-value="false" :inactive-value="true"
                       @change="setHidden(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sortIndex" label="排序" width="80"/>
        <el-table-column label="排序操作" width="100">
          <template slot-scope="{row}">
            <el-button type="text" icon="el-icon-top" @click="onUp(row)"/>
            <el-button type="text" icon="el-icon-bottom" @click="onDown(row)"/>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="100">
          <template slot-scope="{row}">
            <el-button type="text" @click="toSysMenuList(row.id)">下一级</el-button>
            <el-button type="text" @click="onEdit(row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="onDel(row)">
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </data-table>

    <add-edit-dialog :visible.sync="addEditVisible" :row="addEditRow" :parentId="dataTableProps.params.parentId"/>
  </div>
</template>

<script>
  import sysMenuApi from '@/api/sysMenu'
  import AddEditDialog from './components/AddEditDialog'

  export default {
    name: 'sysMenu',
    components: {
      AddEditDialog
    },
    data() {
      return {
        parentName: '顶级菜单',
        parentList: [],

        dataTableProps: {
          params: {
            parentId: 'root'
          },
          isSearchBtn: false,
          isResetBtn: false,
          apiModule: sysMenuApi,
          isAuto: false
        },

        addEditVisible: false,
        addEditRow: null
      }
    },
    methods: {
      onUp({ id }) {
        sysMenuApi.up(id).then(res => {
          this.$refs.dataTable.getDataList()
          this.$notify({
            title: '成功',
            message: `升序成功`,
            type: 'success'
          })
        })
      },
      onDown({ id }) {
        sysMenuApi.down(id).then(res => {
          this.$refs.dataTable.getDataList()
          this.$notify({
            title: '成功',
            message: `降序成功`,
            type: 'success'
          })
        })
      },
      setHidden({ id, hidden }) {
        sysMenuApi.setHidden({ id, hidden }).then(res => {
          this.$refs.dataTable.getDataList()
          this.$notify({
            title: '成功',
            message: `${hidden ? '隐藏' : '显示'}成功`,
            type: 'success'
          })
        })
      },
      toParentList() {
        let id = 'root'
        if (this.parentList.length > 1) {
          id = this.parentList[this.parentList.length - 2].id
        }
        this.toSysMenuList(id)
      },
      toSysMenuList(id) {
        this.$router.push({ name: 'sysMenu', params: { parentId: id } })
      },
      getParent(parentId) {
        console.log(parentId)
        sysMenuApi.getParent(parentId).then(res => {
          this.parentList = res.data
          if (this.parentList.length) {
            this.parentName = this.parentList[this.parentList.length - 1].title
          }
        })
      }
    },
    mounted() {
      let parentId = this.$route.params.parentId
      if (parentId && parentId !== ':parentId') {
        this.dataTableProps.params.parentId = parentId
        this.getParent(parentId)
      } else {
        this.parentId = 'root'
      }
      this.$refs.dataTable.getDataList()
    }
  }
</script>

<style scoped lang="scss">
  .el-page-header {
    margin-bottom: 20px;
    font-size: 18px;

    ::v-deep .el-page-header__content {
      display: flex;
      align-items: center;
    }

    .top {
      font-size: 14px;
      color: #303133;
    }
  }
</style>
